<template>
    <div class="pageWrap bg pos-r">
        <div class="wrap">
            <div class="empty" v-if="shopList.length === 0">
                <div>
                    <el-image src="static/pic/empty.png"></el-image>
                    <div>暂无服务</div>
                </div>
            </div>
            <el-card
                :body-style="{ padding: '0px' }"
                v-for="(item, index) in shopList"
                :key="index"
                @click.native="setIndex(item, index)"
                class="li"
            >
                <div class="imageWrap">
                    <el-image
                        v-show="currIndex == index"
                        class="checkImg"
                        src="static/pic/check.png"
                        style="height: 30px"
                    ></el-image>
                    <el-image
                        v-show="currIndex !== index"
                        class="checkImg"
                        src="static/pic/noCheck.png"
                        style="height: 30px"
                    ></el-image>
                    <el-image
                        :src="$netUrl(item.pictureUrl)"
                        style="height: 120px; width: 250px"
                    ></el-image>
                </div>

                <div>
                    <div class="t1 oe" :title="item.schemeName">
                        {{ item.schemeName }}
                    </div>
                    <div class="t2 oe3" :title="item.addServiceNames">
                        {{ item.addServiceNames }}
                    </div>
                    <div class="t1 money red">
                        ￥{{ precision(item.price) }}/{{ item.gainDays }}天
                    </div>

                    <div class="flex aic">
                        <el-button
                            class="commonBtn2 ysCommonBtn2"
                            @click="onTrial(item)"
                            type="danger"
                            v-if="item.isTrial"
                            >试用{{item.trialDays}}天</el-button
                        >
                        <el-button
                            class="commonBtn1 ysCommonBtn1"
                            @click="
                                showBuyShop = true
                                currRow = item
                            "
                            type="danger"
                            >购买</el-button
                        >
                    </div>
                </div>
            </el-card>
        </div>
        <buyShop
            :companyCode="loginParams.companyCode"
            :companyName="loginParams.companyName"
            :value.sync="showBuyShop"
            :currRow="currRow"
            @getList="getList"
        ></buyShop>
    </div>
</template>
<script >
import setMoney from './components/setMoney'
import buyShop from './components/buyShop'
export default {
    components: {
        setMoney,
        buyShop
    },
    data: function () {
        return {
            currRow: {},
            currIndex: 0,
            showBuyShop: false,
            form: {},
            shopList: [
            ]
        }
    },
    computed: {
        loginParams () {
            return this.$store.state.loginParams
        }
    },
    watch: {

    },
    created () {
        this.getList()
        console.log(this.loginParams, 'loginParams')
    },
    methods: {
        async onTrial (item) {
            this.$confirm(`确定为商家:（${this.loginParams.companyName}）开启试用吗？`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let res = await this.$axios.post(this.$store.state.ip + '/server/agent/serverinfo/trial', {
                    data: {
                        schemeID: item.schemeID,
                        companyCode: this.loginParams.companyCode
                    }
                })
                let response = res.data
                console.log(response)
                if (response.ret === '0') {
                    this.$message({
                        message: '开启成功',
                        type: 'success'
                    })
                    this.getList()
                }
            })
        },
        setIndex (item, i) {
            console.log(i)
            this.currIndex = i
        },
        async getList () {
            let res = await this.$axios.post(this.$store.state.ip + '/server/agent/serverinfo/rules/company', {
                data: {
                    agentId: this.$store.state.loginParams.agentId,
                    companyCode: this.$store.state.loginParams.companyCode
                }
            })
            let response = res.data
            if (response.ret === '0') {
                this.shopList = response.data
            }
        }
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.pageWrap
    padding: 0
    height: 100%
    overflow: auto
    position: relative
    width: 100%

.bg
    height: 100%

.wrap .li
    width: 230px
    margin: 10px
    padding: 10px
    font-size: 14px
    cursor: pointer

.wrap
    display: flex
    flex-wrap: wrap

.empty
    text-align: center
    margin: 100px auto
    color: #9a9494

.imageWrap
    display: flex
    align-items: center
    background: #b2b2b2
    margin-bottom: 20px
    position: relative

.right
    flex: 1

.r_head_top
    display: flex
    justify-content: space-between
    margin-bottom: 20px

.t1
    color: #303034
    font-size: 18px
    font-weight: bold
    min-height: 20px

.t2
    font-size: 14px
    color: #303034
    margin-top: 5px
    line-height: 20px
    height: 40px

.title
    flex: 1

.checkImg
    position: absolute
    top: 0
    right: 0
    z-index: 5

.commonBtn1
    border-radius: 4px
    width: 75px
    height: 32px
    background-image: linear-gradient(to right, #ff7350, #fe9c7a)
    border: none
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px
    font-weight: bold !important

.commonBtn1:hover
    background-image: linear-gradient(to right, #e44e28, #fe9c7a)

.commonBtn2
    border-radius: 4px
    width: 75px
    height: 32px
    display: flex;
    align-items: center;
    justify-content: center;
    color #fff
    background-image: linear-gradient(to right, #42b3c9, #3ec0da) !important
    border: none
    font-size: 13px
    font-weight: bold !important

.commonBtn2:hover
    background-image: linear-gradient(to right, #19a0bb, #42b3c9) !important

.red
    color: #e01212 !important
    font-weight: bold

.commonBtn1 span
    font-weight: bold !important

.commonBtn2 span
    font-weight: bold !important

.btns
    width: 200px

.money
    color: #e01212
    font-size: 15px
    margin-bottom: 10px

.flex
    display: flex
    justify-content: space-between
    align-items: center

.oe
    width: 220px
    overflow: hidden // 超出的文本隐藏
    text-overflow: ellipsis // 溢出用省略号显示
    white-space: nowrap // 溢出不换行
.aic
    align-items center
    justify-content center
.oe3
    width: 220px
    word-break: break-all
    word-wrap: break-word
    overflow: hidden
    text-overflow: ellipsis
    display: -webkit-box
    -webkit-line-clamp: 2
    -webkit-box-orient: vertical

.time
    color: red

.btnWidth
    width: 110px
    color: #fff !important

.mb10
    margin-bottom: 10px
</style>
